﻿import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Glyphicon, Nav, Navbar, NavItem,FormControl,InputGroup } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import "./NavMenu.css";

export class NavMenu extends Component {
  displayName = NavMenu.name;

  render() {
    return (
      <Navbar inverse fixedTop fluid collapseOnSelect>
        <Navbar.Header>
            <Navbar.Brand>
              <LinkContainer to={"/login"} style={{marginTop:8,cursor:'pointer'}}>
                <Glyphicon glyph='user'>
                </Glyphicon>
              </LinkContainer>
            </Navbar.Brand>
            <LinkContainer to={"/"} style={{fontSize:30,fontStyle:'italic',marginBottom:0,cursor:'pointer'}}>
              <Navbar.Text>简约云笔记</Navbar.Text>
            </LinkContainer>
        </Navbar.Header>
        <Navbar.Collapse>
          <InputGroup>
            <FormControl type='text' placeholder='Search' style={{height:40}}>
            </FormControl>
            <InputGroup.Addon>
              <Glyphicon glyph='search'/>
            </InputGroup.Addon>
          </InputGroup>
          <Nav>
            <LinkContainer to={"/"} exact>
              <NavItem>
                <Glyphicon glyph="home" /> Home
              </NavItem>
            </LinkContainer>
            <LinkContainer to={"/counter"}>
              <NavItem>
                <Glyphicon glyph="education" /> Counter
              </NavItem>
            </LinkContainer>
            <LinkContainer to={"/fetchdata"}>
              <NavItem>
                <Glyphicon glyph="th-list" /> Fetch data
              </NavItem>
            </LinkContainer>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}
